<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件</title>
    <link rel="stylesheet" type="text/css" href="../class6/style.css">
	<script src="../class6/vue.js"></script>
</head>
<body>
    <div id="app">
        <div style="float: left;">
            <h2>自定义的下拉框</h2>
            <custom-select btn="查询"></custom-select>
        </div>
        <div style="float:left;">
            <h2>自定义的下拉框2</h2>
            <custom-select btn="搜索"></custom-select>
        </div>
        
    </div>
    <script>
    /*var obj = {
                selectShow:false
            }*/
        //注册组件
        Vue.component("custom-select",{
            data:function(){
                return {
                    selectShow:false
                };
            },
            props:["btn"],
            template:`<section class="warp">
                <div class="searchIpt clearFix">
                    <div class="clearFix">
                        <input type="text" class="keyWord" value="" @click="selectShow = !selectShow" />
                        <input type="button" :value="btn">
                        <span></span>
                    </div>
                    <ul class="list" v-show="selectShow">
                        <li>html+css</li>
                        <li>html5+css3</li>
                        <li>javascript</li>
                        <li>angular</li>
                        <li>react</li>
                        <li>vue</li>
                        <li>jquery</li>
                        <li>nodejs</li>
                    </ul>
                </div>
            </section>`
        })

        new Vue({
            el:"#app"
        });
    </script>
</body>
</html>